---
permalink: "/advanced/case-studies/infinite-scroll/index.xml"
tags: "Advanced/Case Studies"
hv_title: "Infinite Scroll"
hv_button_behavior: "back"
---
{% extends 'templates/base.xml.njk' %}

{% block styles %}
  <style
    id="spinner"
    alignItems="center"
    flex="1"
    height="48"
    justifyContent="center"
  />
{% endblock %}

{% block container %}
  <list>
    {% for i in range(1, 21) %}
      <item key="{{ i }}" style="item">
        <text style="item-label">Item {{ i }}</text>
      </item>
    {% endfor %}
    <item
      id="loading-spinner-page-1"
      action="replace"
      href="/hyperview/public/advanced/case-studies/infinite-scroll/page2.xml"
      key="loadMore"
      once="true"
      style="spinner"
      trigger="visible"
    >
      <spinner />
    </item>
  </list>
{% endblock %}
